import React, { Component } from "react";
import { connect } from "react-redux";
import { incrementAction, decrementAction, getTodos } from "../store/actions";
class App extends Component {
  render() {
    const { counter, increment, decrement } = this.props;
    return (
      <div>
        <h1>当前计数为： {counter}</h1>
        <button onClick={() => decrement()}>-</button>
        <button onClick={() => increment()}>+</button>
        <div>
          {this.props.todos.map((todo) => {
            return <p key={todo.id}>{todo.title}</p>;
          })}
        </div>
      </div>
    );
  }
  componentDidMount() {
    this.props.getTodos();
  }
}
const mapStateToProps = (state) => {
  return {
    counter: state.counter,
    todos: state.todos,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    decrement() {
      dispatch(decrementAction());
    },
    increment() {
      dispatch(incrementAction());
    },
    getTodos() {
      dispatch(getTodos());
    },
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
